<template>
  <div class="wrapper">
    <div class="content">
      <img src="/src/assets/login/UI_Login_Logo.png" class="logo" />
      <img src="/src/assets/login/UI_Login_Text_2.png" class="tips" />

      <loginBtn width="60vw" @click="showModal" style="margin-top: 18rem;" />
    </div>

    <modal ref="modalRef" title="登录">
      <login />
    </modal>
  </div>
</template>

<script setup>
import modal from '@/components/modal.vue'
import login from '@/components/login.vue'
import loginBtn from '@/components/login-btn.vue'
import { ref } from 'vue'

const modalRef = ref()

function showModal() {
  modalRef.value.show()
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100vh;
  background: url('/src/assets/login/BG.png');
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #73afda;
  text-align: center;
}
.logo {
  width: 70%;
  height: auto;
}
.content {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 999;
  top: 50%;
  transform: translate(0, -50%);
}
.tips {
  width: 78%;
  height: auto;
}
</style>